<template>
  <div class="job">
    <header class="d-flex align-center head">
      <h3 class="ml-2 mr-2">Job Sheet</h3>
      <v-btn fab class="elevation-0 add-btn" @click="openDisposeDetailsDialog">
        <v-icon color="#626C84" size="20">mdi-plus-thick</v-icon>
      </v-btn>
    </header>
    <v-card class="job-list">
      <v-list dense class="pl-2 pr-2 pt-0">
        <v-list-item-group>
          <v-list-item class="pl-2 pr-2 mt-2 list" active-class="active-list">
            <v-list-item-content>
              <v-list-item-title class="list-item-content">
                FS-21090001
              </v-list-item-title>
              <v-list-item-subtitle class="list-item-content">
                Inspection Service
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
          <v-list-item class="pl-2 pr-2 mt-2 list" active-class="active-list">
            <v-list-item-content>
              <v-list-item-title class="list-item-content">
                FS-21090001
              </v-list-item-title>
              <v-list-item-subtitle class="list-item-content">
                Inspection Service
              </v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
    <DisposeDetails :show.sync="showDisposeDetailsDialog"></DisposeDetails>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import DisposeDetails from "@/components/JobSheet/Dialog/DisposeDetails.vue";
@Component({
  components: {
    DisposeDetails,
  },
})
export default class JobTable extends Vue {
  showDisposeDetailsDialog = false;
  openDisposeDetailsDialog() {
    this.showDisposeDetailsDialog = true;
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/JobSheet/JobTable/JobTable.scss";
</style>
